<template>
  <div class="wrapper">
    <p>firstName：{{ firstName }}</p>
    <p>lastName：{{ lastName }}</p>
    <p>fullName：{{ fullName }}</p>
    <button @click="changeName">改变</button>
  </div>
</template>

<script>
export default {
  name: "WatchComponent",
  components: {},
  props: {},
  data() {
    return {
      firstName: "Foo",
      lastName: "Bar",
    };
  },
  watch: {
    firstName(newValue, oldValue) {
      console.log("firstName监听器", newValue, oldValue);
    },
    lastName(newValue, oldValue) {
      console.log("lastName监听器", newValue, oldValue);
    },
    fullName(newValue, oldValue) {
      console.log("fullName监听器", newValue, oldValue);
    },
  },
  computed: {
    fullName: {
      get: function () {
        return this.firstName + " " + this.lastName;
      },
      set: function (newValue) {
        var names = newValue.split(" ");
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      },
    },
  },
  methods: {
    changeName() {
      this.fullName = "John Doe";
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
.wrapper {
}
</style>
